<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-09-18 09:43:45
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:23:49
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="info">公司抬头</div>
    </div>
    <div class="content">
      <el-form
        :model="comForm"
        ref="comForm"
        :rules="comRules"
        label-width="120px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="公司名称" prop="companyName">
          <el-input
            v-model="comForm.companyName"
            placeholder="请输入公司名称"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司ID" prop="companyName">
          <el-input
            v-model="comForm.serialNumber"
            placeholder="请输入公司名称"
            style="width: 330px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="registration">
          <el-input
            v-model="comForm.registration"
            placeholder="请输入纳税人识别号"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input
            v-model="comForm.address"
            placeholder="请输入地址"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input
            v-model="comForm.phone"
            placeholder="请输入电话"
            style="width: 330px"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="开户行" prop="bank">
          <el-input
            v-model="comForm.bank"
            placeholder="请输入开户行"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="bankAccount">
          <el-input
            v-model="comForm.bankAccount"
            placeholder="请输入账号"
            style="width: 330px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { companyHead } from "@/api/user";
export default {
  props: {
    userInfo: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    if (this.userInfo.dept.companyName !== null) {
      this.comForm.companyName = this.userInfo.dept.companyName;
      this.comForm.registration = this.userInfo.dept.registration;
      this.comForm.address = this.userInfo.dept.address;
      this.comForm.phone = this.userInfo.dept.phone;
      this.comForm.bank = this.userInfo.dept.bank;
      this.comForm.bankAccount = this.userInfo.dept.bankAccount;
      this.comForm.serialNumber = this.userInfo.serialNumber;
    }
  },
  data() {
    // 验证手机号的校验规则
    let checkMobile = (rule, value, callback) => {
      // 验证手机号的正则表达式
      const regMobile = /^1(3|4|5|6|7|8|9)\d{9}$/;

      if (regMobile.test(value)) {
        // 合法的手机号
        return callback();
      }
      // 不合法
      callback(new Error("请输入合法的手机号"));
    };
    return {
      comRules: {
        companyName: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
          },
        ],
        registration: [
          {
            required: true,
            message: "请输入纳税人识别号",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入地址",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入电话",
            trigger: "blur",
          },
          { validator: checkMobile, trigger: "blur" },
        ],
        bank: [
          {
            required: true,
            message: "请输入开户行",
            trigger: "blur",
          },
        ],
        bankAccount: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
      },
      comForm: {
        companyName: "",
        serialNumber:'',
        registration: "",
        address: "",
        phone: "",
        bank: "",
        bankAccount: "",
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.comForm.validate((valid) => {
        if (!valid) return;
        companyHead(this.comForm).then((res) => {
          this.$message.success(res.msg);
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.app-container {
  padding: 24px 25px;
  .header {
    .info {
      font-size: 0.1rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }
}
.el-form {
  margin-top: 40px;
}
</style>